<template>
  <div class="Playmv">
    <div class="Playmv-box">
      <div class="Playmy-content-box">
        <p>Mv详情</p>
        <div id="mse"></div>
        <div class="Play-momment-text">
          <div class="Play-momment-text-box">
            <img :src="$utils.getImgUrl(this.MvImg.img1v1Url, 120, 120)" alt />
            <span>{{ Detail.artistName }}</span>
          </div>
          <p class="Play-momment-text-name">{{ Detail.name }}</p>
          <div class="Play-momment-text-title">
            <span>发布：{{ Detail.publishTime }}</span>
            <span>播放：{{ Detail.playCount }}</span>
          </div>
          <!-- ////评论的样式 -->
          <div class="Play-momment">
            <li class="Playlistdateil-Content-pinglun-item">
              <div class="Playlistdateil-Content-splendid-comments">
                <p>精彩评论</p>
                <div class="Playlistdateil-Content-splendid-comments-wramp">
                  <ul>
                    <li v-for="items of hotComments" :key="items.id">
                      <div class="new-comments-img">
                        <img
                          :src="$utils.getImgUrl(items.user.avatarUrl, 40, 40)"
                          alt
                        />
                      </div>

                      <div class="new-comments-text">
                        <p>
                          <span class="new-comments-text-address-name">{{
                            items.user.nickname
                          }}</span>
                          <span>{{ items.content }}</span>
                        </p>

                        <p
                          class="Replyto-comment"
                          v-show="items.beReplied.length"
                        >
                          <span class="text-Replyto-comment-address-name">{{
                            items.beReplied.length &&
                            items.beReplied[0].user.nickname
                          }}</span>
                          <span>{{
                            items.beReplied.length && items.beReplied[0].content
                          }}</span>
                        </p>

                        <div class="new-comments-text-create-time">
                          <span class="create-times">yyyy-mm-dd HH:MM:ss</span>
                          <span class="Thumb-up">
                            <i class="iconfont icon-component icon-good">{{
                              items.likedCount
                            }}</i>
                          </span>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="Playlistdateil-Content-new-comments">
                <p v-if="Comment">最新评论</p>
                <div class="Playlistdateil-Content-splendid-comments-wramp">
                  <ul>
                    <li v-for="newItem of Comment" :key="newItem.id">
                      <div class="new-comments-img">
                        <img
                          :src="
                            $utils.getImgUrl(newItem.user.avatarUrl, 40, 40)
                          "
                          alt
                        />
                      </div>

                      <div class="new-comments-text">
                        <p>
                          <span class="new-comments-text-address-name">{{
                            newItem.user.nickname + ":"
                          }}</span>
                          <span>{{ newItem.content }}</span>
                        </p>
                        <!-- v-if=".lenght!==0 " -->
                        <p
                          class="Replyto-comment"
                          v-show="newItem.beReplied.length"
                        >
                          <span class="text-Replyto-comment-address-name">{{
                            newItem.beReplied.length &&
                            newItem.beReplied[0].user.nickname
                          }}</span>
                          <span>{{
                            newItem.beReplied.length &&
                            newItem.beReplied[0].content
                          }}</span>
                        </p>
                        <div class="new-comments-text-create-time">
                          <span class="create-times">yyyy-mm-dd HH:MM:ss)</span>
                          <span class="Thumb-up">
                            <i class="iconfont icon-component icon-good">{{
                              newItem.likedCount
                            }}</i>
                          </span>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </li>
          </div>

          <!-- 评论的样式 -->
          <div class="paginate">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="Total"
              :page-size="20"
              @current-change="change"
            ></el-pagination>
          </div>
        </div>
      </div>

      <div class="Play-recommend-mv">
        <p>推荐Mv</p>
        <div class="Play-recommend-mv-item">
          <ul class="Play-recommend-mv-item-ul">
            <li
              li="Play-recommend-mv-item-li"
              v-for="simi of SimiMv"
              :key="simi.id"
            >
              <div class="mvs-Content-box">
                <div class="mvs-Content-foot-img-box">
                  <img
                    :src="$utils.getImgUrl(simi.cover, 160, 120)"
                    alt
                    class="mvs-Content-img"
                  />
                  <div class="mvs-Content-top-img-title">
                    <i class="iconfont icon-component icon-play"></i>
                    {{ simi.playCount }}
                  </div>
                  <span class="mvs-Content-foot-title">{{
                    getsongstime(simi.duration)
                  }}</span>
                  <div class="mvs-Content-hover-background">
                    <i class="play-icon iconfont icon-component icon-play"></i>
                  </div>
                </div>
                <div class="mvs-Content-foot-text">
                  <p class="mvs-Content-foot-songs">{{ simi.name }}</p>
                  <p class="mvs-Content-foot-sigers">{{ simi.artistName }}</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Player from "xgplayer";
import { mapState, mapMutations } from "vuex";

import {
  fetchPlayMvComment,
  fetchPlayMvImg,
  fetchPlayMvDetail,
  fetchPlayMvUrl,
  fetchPlaySimiMv,
} from "../api";

export default {
  data() {
    return {
      //评论列表

      hotComments: [],
      Comment: [],
      //页码
      Total: 0,
      page: 1,

      Detail: [],

      MvId: "",
      artistId: "",
      MvUrl: {},
      MvImg: {},
      url: "",
      SimiMv: {},

      player: null,
    };
  },

  computed: {
    ...mapState(["isPlay"]),
  },
  async mounted() {
    this.init();

    await this.Urlthis();
    this.initPlayer();
    // if (!this.player) {
    //   this.player = new Player({
    //     id: "mse",
    //     url: this.MvUrl.url,
    //   });
    // }
  },

  methods: {
    ...mapMutations(["setplaystatus"]),
    init() {
      const { Arrid, ArtistId } = this.$route.query;
      this.MvId = Arrid;
      this.artistId = ArtistId;
      this.getPlayMvComment();
      this.getPlayMvDetail();
    },

    getPlayMvComment() {
      fetchPlayMvComment({
        id: this.MvId,
        pageSize: 20,
        offset: (this.page - 1) * 20,
      }).then((res) => {
        this.hotComments = res.hotComments;
        this.Comment = res.comments;
        this.Total = res.total;
        // console.log(this.hotComments);
      });
    },
    getPlayMvDetail() {
      fetchPlayMvDetail({ mvid: this.MvId }).then((res) => {
        this.Detail = res.data;
        // console.log(this.Detail);
      });
    },
    async Urlthis() {
      const res = await fetchPlayMvUrl({ id: this.MvId });
      this.MvUrl = res.data;

      const dates = await fetchPlayMvImg({ id: this.artistId });
      this.MvImg = dates.artist;

      //console.log(this.MvUrl);
      const simi = await fetchPlaySimiMv({ mvid: this.artistId });
      this.SimiMv = simi.mvs;
      //console.log(this.SimiMv);
    },
    getsongstime(item) {
      const ST = item / 1000 / 60;
      const M = parseInt(ST);
      const S = (ST - M) * 60;
      const SS = Math.ceil(S);
      // const S = ST % 60;
      const SSS = String(SS).length === 1 ? "0" + SS : SS;

      const Times = M + ":" + SSS;

      return Times;
    },

    change(ye) {
      this.page = ye;
      this.getPlayMvComment();
    },
    initPlayer() {
      this.player = new Player({
        id: "mse",
        url: this.MvUrl.url,
      });
      this.player.on("play", () => {
        this.setplaystatus(false);
      });
    },
  },
};
</script>

<style lang='less' scoped>
.Playmv {
  height: 100%;
  width: 100%;
  padding: 20px 50px;
  .Playmv-box {
    display: flex;
  }
  .Playmy-content-box {
    #mse {
      z-index: 1;
    }
    flex: 1;
    //页码
    .paginate {
      float: right;
      margin: 15px 0;
    }
  }
  .Play-momment-text {
    width: 600px;

    .Play-momment-text-box {
      height: 70px;
      margin: 20px 0;
      > img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }
      > span {
        position: relative;
        top: -24px;
        left: 10px;
      }
    }
    .Play-momment-text-name {
      margin-bottom: 1.14286rem;
      font-size: 1.71429rem;
      font-weight: 700;
    }
    .Play-momment-text-title {
      display: flex;
      color: #bebebe;
      font-size: 0.85714rem;
      > span {
        display: inline-block;
        margin-right: 1.71429rem;
      }
    }
    //评论的样式
    .Play-momment {
      margin-top: 30px;
      .Playlistdateil-Content-pinglun-item {
        width: 100%;
        height: 100%;
        li {
          display: flex;
        }
        .new-comments-img {
          height: 60px;
          width: 10%;
          // background: rosybrown;
          margin-top: 10px;
          img {
            flex-shrink: 0;
            height: 40px;
            width: 40px;
            border-radius: 50%;
            margin: 10px 5px;
            // position: relative;
            // top: 11px;
          }
        }
        .new-comments-text {
          flex: 1;

          p {
            overflow: hidden;
            display: -webkit-box;
            text-overflow: ellipsis;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
          }
          font-size: 12px;
          line-height: 1.4;
          border-bottom: 1px solid #bebebe;
          padding: 10px 0;
          .new-comments-text-address-name {
            color: rgba(35, 82, 184, 0.6);
          }
        }
        .new-comments-text-create-time {
          margin: 10px 0px;
          font-size: 12px;
          color: #bebebe;
          .Thumb-up {
            float: right;
            i {
              font-size: 12px;
            }
          }
        }
        .Replyto-comment {
          margin-left: 5px;
          background: #e6e5e6;
          padding: 7px 0;
          border-radius: 3px;

          .text-Replyto-comment-address-name {
            color: rgba(35, 82, 184, 0.6);
          }
        }
      }
    }
  }
  .Play-recommend-mv {
    margin-left: 20px;
    .Play-recommend-mv-item {
      width: 310px;
      height: 640px;

      // background: violet;
      float: right;

      .Play-recommend-mv-item-ul {
        padding-top: 8px;
        > li {
          margin-top: 15px;
        }
        .mvs-Content-box {
          display: flex;
          position: relative;
          width: 100%;
          left: 5px;
          border-radius: 6px;
          overflow: hidden;

          .mvs-Content-foot-img-box {
            flex: 1;
            height: 80px;
            width: 160px;

            &:hover {
              .mvs-Content-hover-background {
                opacity: 0.7;
              }
            }
            .mvs-Content-foot-title {
              position: absolute;
              bottom: 5px;
              right: 152px;
              color: #fff;
            }
            .mvs-Content-img {
              height: 80px;
              width: 160px;
              border-radius: 6px;
            }
            .mvs-Content-top-img-title {
              position: absolute;
              top: 3px;
              right: 156px;
              color: #fff;
            }
            .mvs-Content-hover-background {
              position: absolute;
              margin: auto;
              left: 0;
              top: 14px;
              right: 146px;
              width: 50px;
              height: 50px;
              background-color: rgba(255, 255, 255, 0.7);
              line-height: 50px;
              text-align: center;
              color: red;
              border-radius: 50%;
              opacity: 0;
              transition: all 0.3s;

              .icon-play {
                font-size: 22px;
                margin-left: 1px;
              }
            }
          }
          .mvs-Content-foot-text {
            flex: 1;
            margin-left: 10px;
            .mvs-Content-foot-songs .mvs-Content-foot-sigers {
              padding-top: 6px;
              font-size: 16px;
              color: #666;
              width: 100%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .mvs-Content-foot-sigers {
              margin-top: 14px;
              font-size: 10px;
            }
          }
        }
      }
    }
  }
}
</style>